import React from 'react'
import { useState } from 'react'

export default function Search({setSearchName}) {

  const [searchKey, setSearchKey] = useState('')

  // 在输入时, 实时将输入数据保存到state中
  const handleChange = e => {
    setSearchKey(e.target.value)
  }

  const handleClick = () => {
    // 如果searchKey有值, 调用setSearchName传递给父组件
    if (searchKey) {
      setSearchName(searchKey)
    }
  }


  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input value={searchKey} onChange={handleChange} type="text" placeholder="enter the name you search"/>
        <button onClick={handleClick}>Search</button>
      </div>
    </section>
  )
}
